<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>EWCRM</title>

  <!-- ========== Css Files ========== -->
  <link href="/css/root.css" rel="stylesheet">
  <style type="text/css">
    body{background: #F5F5F5;}
    .login-form .form img{
      margin-bottom: 5px !important;
    }
  </style>
    <script type="text/javascript" src="/js/jquery.min.js" ></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/plugins.js"></script>
  </head>
  <body>

    <div class="login-form">
      <div class="form">
        <div class="top">
          <img src="/img/guangfuu.png" alt="icon" class="icon">
          <h1>EWCRM</h1>
          <h4>广福进销存称重系统服务器</h4>
        </div>
        <div class="form-area">
          <div class="group">
            <input id="username" type="text" class="form-control" placeholder="用户名">
            <i class="fa fa-user"></i>
          </div>
          <div class="group">
            <input id="password" type="password" class="form-control" placeholder="密码">
            <i class="fa fa-key"></i>
          </div>
          <div class="group">
            <input id="verificationCode" type="text" placeholder="验证码">
            <img alt="获取验证码" id="codeImg" class="codeImg" src="kaptcha" onmouseover="this.style.cursor='pointer'"
                 data-toggle="tooltip" data-placement="bottom" title="点击更换验证码" />
          </div>
          <div class="checkbox checkbox-primary">
            <input id="remberCheckbox" type="checkbox" />
            <label for="remberCheckbox"> 记住 密码</label>
          </div>
          <button id="loginButton" type="button" class="btn btn-default btn-block">登录</button>
        </div>
      </div>
      <div class="footer-links row">
        <div class="col-xs-6"><a href="javascript:void(0)"><i class="fa fa-external-link"></i> 马上 注册</a></div>
        <div class="col-xs-6 text-right"><a href="javascript:void(0)"><i class="fa fa-lock"></i> 忘记 密码</a></div>
      </div>
    </div>

    <!-- Start an Alert -->
    <div id="alerttop" class="kode-alert kode-alert-icon kode-alert-click alert6 kode-alert-top">
      <i class="fa fa-user"></i>
      <span id="errorMesage">This is an example top alert. You can edit what u wish. </span>
      <a href="javascript:void(0)">点击这里关闭</a>
    </div>
    <!-- End an Alert -->

    <!-- Start an Alert -->
    <div id="alertbottom" class="kode-alert kode-alert-icon kode-alert-click alert3 kode-alert-bottom">
      <i class="fa fa-user"></i>
      <span id="successMessage">This is an example top alert. You can edit what u wish. </span>
      <a href="javascript:void(0)">点击这里关闭</a>
    </div>
    <!-- End an Alert -->

    <script src="/js/fetch.min.js" ></script>
    <script src="/js/jquery.cookie.min.js"></script>
    <script src="/js/jquery.base64.js"></script>
    <script src="/js/spop/spop.min.js" ></script>
    <script src="/js/loading/loading.js" ></script>
    <script src="/js/kode-alert/main.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/fetchFun.js"></script>
    <script>
      $(function(){
        $.base64.utf8encode = true;
        var batman = $.cookie('batman');
        if(!isEmpty(batman)){
          batman = $.base64.atob(batman, true);
          var i = batman.indexOf(';');
          $('#username').val(batman.substring(0, i));
          $('#password').val(batman.substring(i+1, batman.length));
          $('#remberCheckbox').prop('checked', true);
        }

        $("#codeImg").click(function(){
          $("#codeImg").attr("src","kaptcha?"+Math.random());
        });

        $(document).keypress(function(e) {
          // 回车键事件
          if(e.which == 13) {
            $("#loginButton").click();
          }
        });

        $('#loginButton').click(function(){
          console.log('loginButton clicked');
          var username = $('#username').val();
          if(isEmpty(username)){
            myAlert("用户名不能为空",true);
            $('#username').focus();
            return false;
          }
          if(username.length>32){
            myAlert("用户名过长",true);
            $('#username').focus();
            return false;
          }

          var password = $('#password').val();
          if(isEmpty(password)){
            myAlert("密码不能为空",true);
            $('#password').focus();
            return false;
          }

          var verificationCode = $('#verificationCode').val();
          if(isEmpty(verificationCode)){
            myAlert("验证码不能为空",true);
            $('#verificationCode').focus();
            return false;
          }
          if(verificationCode.length!=4){
            myAlert("验证码长度不正确",true);
            $('#verificationCode').focus();
            return false;
          }

          post('/service/login', function(data){
            if(data.success){
              if($('#remberCheckbox').is(':checked'))
                $.cookie('batman',$.base64.btoa(username+';'+password) , { expires: 7, path: '/' });
              else
                $.removeCookie('batman',{ expires: 7, path: '/' });
              location.href = '/admin/index';
            }else{
              spop(data.message, 'error');
            }
          }, {
            username: username,
            password: password,
            verificationCode: verificationCode
          });
        });
      });
    </script>
</body>
</html>